<template>
  <div class="refund-page">
    <el-card shadow="always">
      <div slot="header">
        <line-header title="退款记录"></line-header>
      </div>
      <div class="card-box">
        <div class="card-top-box">
<!--          <el-button type="primary" plain> 已退金额：{{refundSuccessAmount*0.01}} 元</el-button>-->
          <el-button type="primary" @click="hkAddNewReund" v-if="userInfo.role==2"> 申请退款</el-button>
        </div>
        <div class="card-table-box">
          <el-table
            :data="tableList"
            style="width: 100%"
            header-cell-class-name="header-cell-class-name"
            stripe
            border
          >
            <el-table-column prop="id" label="编号" align="center">
              <template slot-scope="scope">{{ pageSize*(currentPage-1)+ scope.$index+1 }}</template>
            </el-table-column>
            <el-table-column prop="amount" label="金额" align="center">
              <template slot-scope="{ row }">
                <div>{{ row.amount*0.01 }} 元</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="applyTime"
              label="申请时间"
              align="center"
            >
              <template slot-scope="{ row }">
                <div>{{ hkGetTimeFmt(row.applyTime) }} </div>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="退款进程" align="center">
              <template slot-scope="{ row }">
                <el-tag :type="row.result | filiterTagType">
                  {{ row.result | filiterTagText }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="finishTime" label="退款时间" align="center">
              <template slot-scope="{ row }">
<!--                <div>{{ hkGetTimeFmt(row.applyTime)}} </div>-->
                {{(row.result !=1)?hkGetTimeFmt(row.applyTime):"--"}}

              </template>
            </el-table-column>
            <el-table-column  label="操作" align="center">
              <template slot-scope="{ row }">
                <el-button type="link" icon="look" @click="lookRefund(row)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-box">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[20, 50, 100]"
              :page-size="20"
              :total="total"
              layout=" prev, pager, next,sizes,jumper"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import LineHeader from "@/components/line-header/index";
import { refundProcessList } from "@/utils/tools";
import {trace} from "../../../utils/trace"
import {hkGetTimeFmt} from "../../../utils/tools"
import {mapGetters} from "vuex"
export default {
  components: { LineHeader },
  props: {},
  data() {
    return {
      hkGetTimeFmt:hkGetTimeFmt,
      refundSuccessAmount: 0,   //已退金额
      currentPage: 1,
      pageSize:20,
      total: 2,
      tableList: [
        // {
        //   id: "1123123",
        //   serial: "01",
        //   amount: "1309",
        //   result: 2,
        //   createrTimte: "2017-10-31  23:12:00",
        //   time: "2017-10-31  23:12:00"
        // }
      ]
    };
  },
  filters: {
    filiterTagType(val) {
      return refundProcessList.find(item => {
        return item.key == val;
      }).type;
    },
    filiterTagText(val) {
      return refundProcessList.find(item => {
        return item.key == val;
      }).label;
    }
  },
  watch: {},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    lookRefund(item){   //查看详情
      let info = encodeURIComponent(JSON.stringify(item));
      this.$router.push({
        path: "/finance/refund/auditing",
        query: { info: info }
      });
    },
    hkAddNewReund() {
      this.$router.push({ path: "/finance/refund/add" });
    },
    handleSizeChange(value) {
      this.pageSize = value;
      this.currentPage = 1;
      this.getList();
    },
    handleCurrentChange(value) {
      this.currentPage = value;
      this.getList();
    },

    getList(){
      let page = this.currentPage;
      let count = this.pageSize;
      let direction = 1;
      // let result = 3;   // 1 2 ,3  4
      this.$store.dispatch('finance/refundQuery', {page, count, direction}).then((data) => {
        trace("refundQuery-查询退款列表-data", data);
        this.tableList = data.data;
        this.total = data.total;
        this.refundSuccessAmount = data.refundSuccessAmount;
      })
        .catch((err) => {
          trace("查询退款列表-refundQuery-err", err)
        })
    },
  },
  created() {
    this.getList();
  },
  mounted() {

  }
};
</script>
<style lang="scss" scoped>
::v-deep .header-cell-class-name {
  background: #ecf0f3;
}
.card-table-box {
  margin-top: 30px;
}
</style>
